<template>
    <div class="userProfile">
      <el-card>
        <el-descriptions class="margin-top" title="简介" :column="2" border>
          <template slot="extra">
            <!-- <el-button type="primary" v-if="$route.params.id==$store.state.id" size="small">操作</el-button> -->
            <el-button type="primary" v-if="$route.params.id==1" size="small">操作</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-picture-outline"></i>
              头像
            </template>
            <img class="img" :src="avatar" alt="" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              账户名
            </template>
            {{ account }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-custom"></i>
              昵称
            </template>
            {{ nickname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-odometer"></i>
              年龄
            </template>
            {{ age }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-male"></i>
              <i class="el-icon-female"></i>
              性别
            </template>
            <el-tag size="small">{{ sex }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱Email
            </template>
            {{ email }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号码
            </template>
            {{ mobilePhoneNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              地区
            </template>
            {{ area }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              职业
            </template>
            {{ work }}
          </el-descriptions-item>
  
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-basketball"></i>
              兴趣爱好
            </template>
            {{ hobby }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-magic-stick"></i>
              个性签名
            </template>
            {{ design }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-date"></i>
              注册日期
            </template>
            {{ createDate }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </template>
  
  <script>
//   import { userInfo } from "@/api/user.js";
  export default {
    data() {
      return {
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        account: '',
        age: 18,
        email: '',
        mobilePhoneNumber: '',
        area: '',
        createDate: '2018-09-11',
        nickname: '',
        sex: '',
        work: '',
        hobby: '',
        design: '',
      };
    },
    // mounted() {
    //   this.load();
    // },
    methods: {
      // load() {
        // userInfo(this.$route.params.id)
        //   .then((res) => {
        //     this.avatar = res.data.avatar;
        //     this.account = res.data.account;
        //     this.age = res.data.age;
        //     this.email = res.data.email;
        //     this.mobilePhoneNumber = res.data.mobilePhoneNumber;
        //     this.area = res.data.area;
        //     this.createDate = res.data.createDate;
        //     this.nickname = res.data.nickname;
        //     this.sex = res.data.sex == 1 ? "男" : "女";
        //     this.work = res.data.work;
        //     this.design = res.data.design;
        //     this.hobby = res.data.hobby;
        //   })
        //   .catch((err) => {
        //     console.log(err);
        //   });
      // },
    },
  };
  </script>
  
  <style scoped>
  .userProfile{
    height: 100%;
  }
  .img {
    width: 60px;
    height: 60px;
  }
  </style>
  